<template>
  <div>
    <div v-if="type == 'skin'"  :style="{width: windowWidth + 'px', height: windowHeight + 'px'}" class="page" style="margin: auto">
      <Page  class="content"  :style="{width: theme.canvasWidth + 'px', height: theme.canvasHeight + 'px', transform: 'scale(' + windowWidth / theme.canvasWidth + ',' + windowHeight / theme.canvasHeight  +')'}"  :elements="elements" type="see" />
    </div>
    <div  v-if="type == 'theme'" :style="{width: windowWidth + 'px', height: windowHeight + 'px'}" class="page" style="margin: auto">
      <el-carousel @change="pageChange" :interval="interval" indicator-position="none" trigger="click" :height="windowHeight + 'px'" :width="windowWidth + 'px'" >
        <el-carousel-item v-for="item in pages" :key="item.id">
          <Page class="content" :style="{width: theme.canvasWidth + 'px', height: theme.canvasHeight + 'px', transform: 'scale(' + windowWidth / theme.canvasWidth + ',' + windowHeight / theme.canvasHeight  +')'}" :elements="item.elements" type="see" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
    import Page from '../../components/Page'
    export default {
      name: 'view',
      data () {
        return {
          theme: {},
          pages: [],
          elements: [],
          id: 0,
          type: 'skin',
          interval: 3000,
          windowHeight: 720,
          windowWidth: 1280
        }
      },
      methods: {
        pageChange (t, l) {
          this.interval = this.pages[t].duration * 1000
          console.log(this.interval)
        },
        initPage () {
          this.windowHeight = window.document.body.clientHeight
          this.windowWidth = this.theme.canvasWidth * (this.windowHeight / this.theme.canvasHeight)
          console.log('height:', this.windowHeight, 'width:', this.windowWidth)
        }
      },
      mounted () {
        this.id = this.$route.query.id
        this.type = this.$route.query.type
        if (this.type === 'skin') {
          this.$http({
            url: this.$http.adornUrl(`/sys/skin/info/` + this.id),
            method: 'get'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.elements = data.skin.elements
              this.theme = data.skin
              this.initPage()
            }
          })
        } else {
          this.$http({
            url: this.$http.adornUrl(`/sys/theme/info/` + this.id),
            method: 'get'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.theme = data.theme
              this.pages = data.theme.pages
              // this.elements = this.pages[0].elements
              this.initPage()
            }
          })
        }
      },
      components: {
        Page
      }
    }
</script>

<style scoped>
  .content {
    transform-origin: left top;
    background-color: #fff;
    overflow: hidden;
    position: relative;
  }
  .page{
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
  }
</style>
